import React from 'react'
import './index.css'

export default function Item({todo, deleteTodo, toggleTodo}) {
  return (
    <li className="todo-item">
      <label>
        <input type="checkbox" checked={todo.complete} onChange={() => toggleTodo(todo.id)}/>
        <span className={todo.complete ? 'done' : ''}>{todo.title}</span>
      </label>
      <button className="btn btn-danger" onClick={() => deleteTodo(todo.id)}>删除</button>
    </li>
  )
}
